<template>
    <div class="graph-container">
      <div ref="chartRef" :style="`height:${view.height - 140}px; width: 70%;`"></div>
      <div v-if="selectedNode" class="node-info" style="width: 28%; padding: 20px">
        <el-card :body-style="{ padding: '20px' }">
          <h3>{{ selectedNode.name }} 信息</h3>
          <el-row>
            <el-col :span="6">节点名称:</el-col>
            <el-col :span="18">{{ selectedNode.name }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">节点类型:</el-col>
            <el-col :span="18">{{ selectedNode.type }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">节点样本:</el-col>
            <el-col :span="18">
              <el-tag v-for="sample in selectedNode.samples" :key="sample">{{ sample }}</el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">节点模型:</el-col>
            <el-col :span="18">{{ selectedNode.model }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">节点成果:</el-col>
            <el-col :span="18">
              <el-tag v-for="result in selectedNode.results" :key="result">{{ result }}</el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">节点地址:</el-col>
            <el-col :span="18">{{ selectedNode.address }}</el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  </template>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import * as echarts from "echarts";
import { ElCard, ElRow, ElCol, ElTag } from "element-plus";

const generateIPAddress = (index: number) => {
  return `192.168.1.${index + 1}`; // Generate IP from 192.168.1.1 to 192.168.1.20
};

// Dynamically create 20 nodes with unique IP addresses
const nodes = ref(
  Array.from({ length: 20 }, (_, index) => ({
    id: index + 1,
    name: `地方节点${index + 1}`,
    type: index === 0 ? "中心" : "地方", // First node is "中心" (central node), others are "地方" (local nodes)
    samples: [`样本${index + 1}`],
    model: `模型${String.fromCharCode(65 + index)}`, // Generate models like 模型A, 模型B, etc.
    results: [`成果${index + 1}`],
    address: generateIPAddress(index), // Dynamic IP address
  }))
);

// 选中的节点属性
const selectedNode = ref<any>(null);

// 图表初始化
const chartRef = ref(null);

const initChart = () => {
  const chart = echarts.init(chartRef.value);

  // 连接中心节点和所有地方节点，确保地方节点之间没有连接
  const links = [
    { source: 0, target: 1, label: { show: true, formatter: "传输" } },
    { source: 0, target: 2, label: { show: true, formatter: "传输" } },
    { source: 0, target: 3, label: { show: true, formatter: "传输" } },
    { source: 0, target: 4, label: { show: true, formatter: "传输" } },
    { source: 0, target: 5, label: { show: true, formatter: "传输" } },
    { source: 0, target: 6, label: { show: true, formatter: "传输" } },
    { source: 0, target: 7, label: { show: true, formatter: "传输" } },
    { source: 0, target: 8, label: { show: true, formatter: "传输" } },
    { source: 0, target: 9, label: { show: true, formatter: "传输" } },
    { source: 0, target: 10, label: { show: true, formatter: "传输" } },
    { source: 0, target: 11, label: { show: true, formatter: "传输" } },
    { source: 0, target: 12, label: { show: true, formatter: "传输" } },
    { source: 0, target: 13, label: { show: true, formatter: "传输" } },
    { source: 0, target: 14, label: { show: true, formatter: "传输" } },
    { source: 0, target: 15, label: { show: true, formatter: "传输" } },
    { source: 0, target: 16, label: { show: true, formatter: "传输" } },
    { source: 0, target: 17, label: { show: true, formatter: "传输" } },
    { source: 0, target: 18, label: { show: true, formatter: "传输" } },
    { source: 0, target: 19, label: { show: true, formatter: "传输" } },
    { source: 0, target: 20, label: { show: true, formatter: "传输" } },
    { source: 1, target: 0, label: { show: true, formatter: "传输" } },
    { source: 2, target: 0, label: { show: true, formatter: "传输" } },
    { source: 3, target: 0, label: { show: true, formatter: "传输" } },
    { source: 4, target: 0, label: { show: true, formatter: "传输" } },
    { source: 5, target: 0, label: { show: true, formatter: "传输" } },
    { source: 6, target: 0, label: { show: true, formatter: "传输" } },
    { source: 7, target: 0, label: { show: true, formatter: "传输" } },
    { source: 8, target: 0, label: { show: true, formatter: "传输" } },
    { source: 9, target: 0, label: { show: true, formatter: "传输" } },
    { source: 10, target: 0, label: { show: true, formatter: "传输" } },
    { source: 11, target: 0, label: { show: true, formatter: "传输" } },
    { source: 12, target: 0, label: { show: true, formatter: "传输" } },
    { source: 13, target: 0, label: { show: true, formatter: "传输" } },
    { source: 14, target: 0, label: { show: true, formatter: "传输" } },
    { source: 15, target: 0, label: { show: true, formatter: "传输" } },
    { source: 16, target: 0, label: { show: true, formatter: "传输" } },
    { source: 17, target: 0, label: { show: true, formatter: "传输" } },
    { source: 18, target: 0, label: { show: true, formatter: "传输" } },
    { source: 19, target: 0, label: { show: true, formatter: "传输" } },
    { source: 20, target: 0, label: { show: true, formatter: "传输" } },
  ];

  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{b}", // 触发时显示节点名称
    },
    series: [
      {
        type: "graph",
        layout: "force",
        force: {
          repulsion: 300, // 排斥力，控制节点间距
          edgeLength: [100, 400], // 边的长度
          gravity: 0.1, // 引力，拉开节点
        },
        symbolSize: 60, // 节点大小
        roam: true, // 开启拖拽
        label: {
          position: "bottom",
          show: true,
        },
        edgeSymbol: ["circle", "arrow"],
        edgeSymbolSize: [4, 10],
        data: nodes.value.map((node) => ({
          id: node.id,
          name: node.name,
          symbolSize: 60,
          itemStyle: {
            color: node.type === "中心" ? "#00aaff" : "#ff5722",
          },
        })),
        links: links,
      },
    ],
  };
  chart.setOption(option);

  // 监听点击事件
  chart.on("click", (params: any) => {
    if (params.dataType === "node") {
      const nodeId = params.data.id;
      selectedNode.value = nodes.value.find((node) => node.id === nodeId);
    }
  });
};

// 在页面加载后初始化图表
onMounted(() => {
  initChart();
});
const view = reactive({
  height: window.innerHeight,
});
</script>

<style scoped>
.graph-container {
  display: flex;
  justify-content: space-between;
}
.node-info {
  padding: 20px;
}
</style>
